<template>
	<view>
		<view class="login-top">
			<!-- 图标 -->
			<view class="login-img">
				<image src="../../static/my/bg@2x.png" mode=""></image>
			</view>
			<!--下面内容 -->
		</view>
		<view class="login-log">
			<view class="login-yijian flex  align-center  just-center" @click="loginin">
				微信用户一键登录
			</view>
			<view class="login-insert flex  align-center just-center" @click="insertPhone">
				手机号码登录/注册
			</view>
		</view>
		<view>
			<u-popup v-model="showphonenum" mode="center" border-radius="14" style="" width="500rpx" height="600px"
				closeable :mask-close-able="false">
				<view class="" style="text-align: center;margin: 292rpx 0rpx 0rpx;font-size: 14px;
				font-family:auto;
				font-weight: bold;
				color: #00000 ">
					微信授权成功
				</view>
				<view class="" style="text-align: center;margin: 40rpx 0rpx 60rpx; font-size: 13px;
				font-family: auto;
				font-weight: 500;
				color: #666666;">
					授权绑定您的手机号
				</view>
				<view class="flex aj-center" style="width: 100%; text-align: center; ">
					<button @click="countermand" class="f14a5"
						style="margin: 0;width: 50%;height: 86rpx;border-radius: 0;color: #666666;">拒绝</button>
					<button open-type="getPhoneNumber" class="f14a5" @getphonenumber="onGetPhoneNumber"
						style="margin: 0;width: 50%;height: 86rpx; color: #FE5734;">确认</button>
				</view>
			</u-popup>
			<!-- <u-button @click="showphonenum = true">打开</u-button> -->
		</view>
	</view>
</template>
<script>
	import WXBizDataCrypt from "@/common/js/WXBizDataCrypt.js";
	import {
		login
	} from "@/utils/xcx/login.js";
	import {
		UserInfo
	} from "@/api/xcx/myUserLogo/myUserLogo.js";
	export default {
		data() {
			return {
				code: '',
				token: '',
				session_key: '',
				showphonenum: false,
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token') //进入界面判断是否登陆过
		},
		methods: {
			// 微信用户一键登录
			loginin() {
				// 点击登录 那么调用login  在弹窗绑定手机号    取消绑定手机号直接点击绑定手机号  判断是否登陆过
				if (this.token) {
					uni.showToast({
						title: '请勿重复登录',
						icon: 'none'
					})
				} else {
					login().then(res => {
						console.log(res, 'DEMHGLI')
						this.code = uni.getStorageSync('code');
						this.session_key = uni.getStorageSync('session_key');
						this.showphonenum = true;
					})
				}
			},
			//确认
			onGetPhoneNumber(e) {
				console.log(e, 'e')
				console.log(e.detail.encryptedData, 'e.detail.encryptedData')
				console.log(e.detail.iv, 'e.detail.iv')
				if (e.detail.errMsg != "getPhoneNumber:ok") { //用户决绝授权
					//拒绝授权后弹出一些提示   
					this.showphonenum = false;
					uni.navigateTo({
						url: '../index/index'
					})
				} else { //允许授权    
					let pc = new WXBizDataCrypt('wxaf69c1265413ebcd', this.session_key);
					let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
					console.log(data, 'data')
					console.log(pc, 'pc')

					uni.setStorage({
						key: 'phone',
						data: data.phoneNumber,
					})
					uni.showLoading({
						title: '绑定中...'
					})
					UserInfo([{
						field: "phone",
						value: data.phoneNumber
					}]).then(res => {
						uni.hideLoading();
						this.showphonenum = false;
						uni.navigateBack({
							delta: 1
						})
					})
				}
			},
			// 弹出框的拒绝
			countermand() {
				this.showphonenum = false;
				uni.navigateBack({
					delta: 2
				})
			},
			// 手机号码登录注册
			insertPhone() {
				// 登录过
				if (this.session_key) {
					this.showphonenum = true;
				} else {
					this.loginin();
				}
			}
		}
	}
</script>

<style>
	.u-mode-center-box {
		width: 462rpx !important;
		height: 530rpx !important;
		background-image: url(../../static/my/Notifications@2x.png) !important;
		background-size: 100%;
		background-repeat: no-repeat
	}

	.login-top {
		width: 100%;
		height: 382rpx;
		/* background-color: #FE5734; */
		overflow: hidden;
	}

	.login-img {
		/* width: 220rpx; */
		width: 100%;
		height: 382rpx;
		/* background-color: #000000; */
		margin: auto;
		margin-bottom: 50rpx;
	}

	.login-logo {
		width: 100%;
		margin-top: 34rpx;
	}

	.login-title {
		text-align: center;
		color: white;
		font-size: 34rpx;
	}

	.f14a5 {
		font-size: 14px;
		font-family: auto;
		font-weight: 500;
	}

	.login-log {
		width: 600rpx;
		margin: auto;
		margin-top: 156rpx;
		border-radius: 20px;
	}

	.login-yijian {
		width: 600rpx;
		margin: auto;
		height: 80rpx;
		background-color: #FE5734;
		border-radius: 20px;
		text-align: center;
		margin-bottom: 44rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.login-insert {
		width: 600rpx;
		margin: auto;
		height: 80rpx;
		border: 1px solid #FE5734;
		border-radius: 20px;
		text-align: center;

		font-size: 17px;

		color: #FE5734;
	}
</style>
